body {
    height: 1300px;
}

.left,
.right {
    height: 1100px;
}

.song_Id {
    width: 102%;
    height: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0079ab66;
}

.song_Id p {
    font-size: 30px;
    white-space: nowrap;
}

.LEGACY {
    background: #7700ff88;
}

.AT {
    background: #9c9c9c88;
}

.IN {
    background: #ff616188;
}

.HD {
    background: #009dff88;
}

.EZ {
    background: #7ae07a88;
}

.rank_dif_1 {
    /* background: linear-gradient(-75deg, #9c9c9c88 24%, #ff616188 28%, #ff616188 49%, #009dff88 53%, #009dff88 72%, #7ae07a88 76%); */
    background: linear-gradient(-75deg, #9c9c9c88 24%, #00000000 24%, #00000000 28%, #ff616188 28%, #ff616188 49%, #00000000 49%, #00000000 53%, #009dff88 53%, #009dff88 73%, #00000000 73%, #00000000 77%, #7ae07a88 77%);
    margin-top: 20px;
    width: 98%;
    height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.rank_dif_0 {
    /* background: linear-gradient(-75deg, #9c9c9c88 24%, #ff616188 28%, #ff616188 49%, #009dff88 53%, #009dff88 72%, #7ae07a88 76%); */
    background: linear-gradient(-75deg, #ff616188 32%, #00000000 32%, #00000000 36%, #009dff88 36%, #009dff88 65%, #00000000 65%, #00000000 70%, #7ae07a88 70%);
    margin-top: 20px;
    width: 98%;
    height: 100px;
    display: flex;
    justify-content: space-around;
}

.a_rank {
    display: flex;
    width: 100px;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.a_rank_dif {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: row;
}

.a_rank_dif p {
    font-size: 40px;
}

.a_rank_name {
    display: flex;
    width: 100%;
    justify-content: center;
}

.a_rank_name p {
    font-size: 20px;
}

.data_score {
    position: relative;
    display: flex;
    width: inherit;
    justify-content: center;
}

.data_score p {
    font-size: 70px;
}

.data_mid {
    display: flex;
    height: 27%;
    align-items: center;
    justify-content: space-around;
}

.data_rks {
    height: 100%;
    display: flex;
    align-items: center;
}

.data_acc {
    height: 100%;
    display: flex;
    align-items: center;
}

.data_rks p,
.data_acc p {
    font-size: 39px;
}

.data_rks p {
    color: yellow;
}

.data_acc p {
    color: white;
}

.data_bottom {
    display: flex;
    justify-content: flex-end;
    width: 90%;
}

.data_suggest {
    display: flex;
}

.data_suggest p {
    font-size: 40px;
    color: greenyellow;
}

#NEW {
    background: #00000000;
}

.no_info {
    position: absolute;
    width: 100%;
    height: 93%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.no_info p {
    font-size: 80px;
}

.scoreHistory {
    width: 93%;
    height: auto;
    max-height: 34%;
    display: flex;
    margin-top: 20px;
    background-color: #87ceeb5e;
    border: skyblue 1px solid;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    flex-direction: row;
    padding-top: 1%;
    padding-bottom: 1%;
    overflow: hidden;
}

.oneHistory {
    width: 22%;
    height: 80px;
    position: relative;
    margin-top: 2%;
    margin-bottom: 0%;
    border: 1px solid skyblue;
}

.HistoryDate {
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: flex-end;
    bottom: 100%;
}

.HistoryDate p {
    line-height: 18px;
}

.HistoryRating {
    position: absolute;
    display: flex;
    width: 35%;
    height: 67%;
    align-items: center;
    justify-content: center;
}

.HistoryRating img {
    max-width: 100%;
    max-height: 100%;
}

.HistoryScore {
    position: absolute;
    display: flex;
    width: 65%;
    right: 0;
    height: 67%;
    justify-content: center;
    align-items: center;
}

.HistoryScore p {
    font-size: 29px;
    line-height: 50px;
}

.HistoryAcc {
    position: absolute;
    display: flex;
    bottom: 1px;
    width: 65%;
    justify-content: center;
    align-items: center;
}

.HistoryAcc p {
    font-size: 20px;
    color: yellow;
}

.HistoryRks {
    position: absolute;
    display: flex;
    bottom: 1px;
    right: 0px;
    width: 35%;
    justify-content: center;
    align-items: center;
}

.HistoryRks p {
    font-size: 20px;
}